<template>
  <div class="containerBox tableList">
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column property="tagGroup" label="标签组"></el-table-column>
      <el-table-column width="500px" label="标签内容">
        <template slot-scope="scope">
          <span class="tag" v-for="item in scope.row.tagList" :key="item.id">{{item.name}}</span>
        </template>
      </el-table-column>
      <el-table-column property="tagState" label="状态">
        <template slot-scope="scope">
          <span class="tag"  v-if="scope.row.state === 'SHOW'">显示</span>
          <span class="tag"  v-if="scope.row.state === 'HIDDEN'">隐藏</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'tagLibrary',
  data () {
    return {
      tableData: [
        {
          tagGroup: '爱心专区',
          id: 222,
          state: 'SHOW',
          tagList: [
            {
              id: 333,
              name: '爱心专区犬用'
            }, {
              id: 334,
              name: '爱心专区猫用'
            }
          ]
        }, {
          tagGroup: '爱心专区',
          id: 223,
          state: 'HIDDEN',
          tagList: [
            {
              id: 335,
              name: '爱心专区犬用'
            }, {
              id: 336,
              name: '爱心专区猫用'
            }
          ]
        }, {
          tagGroup: '爱心专区',
          id: 224,
          state: 'SHOW',
          tagList: [
            {
              id: 337,
              name: '爱心专区犬用'
            }, {
              id: 338,
              name: '爱心专区猫用'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style scoped lang="less">
  .tableList{
    /deep/ .el-table .cell{
      color:#000;
      font-weight: normal;
      text-align:center;
      line-height:25px;
    }
    /deep/ .el-table__body-wrapper tbody tr *{
      font-size:14px;
    }
    /deep/ .el-table__body-wrapper tbody tr td .cell .tagS{
      border:1px solid #c7c7c7;
      padding: 5px;
      margin-bottom: 5px;
      margin-right:5px;
    }
    /deep/ .el-table__body-wrapper tbody tr td .cell a.oper{
      color: #008fff;
    }
    span.tag{
      margin: 5px;
      border:1px solid #ebeef5;
      padding:0 5px;
      line-height:30px;
    }
    .el-pagination{
      margin-top: 40px;
      text-align: center;
    }
    .pagination /deep/ *{
      font-size: 16px;
    }
  }
</style>
